<template>
  <div class="app-container">
    <el-alert title="节假日期间不排课" type="warning" :closable="false" />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">
          添加节假日
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="开始日期" align="center" prop="startDate" />
      <el-table-column label="结束日期" align="center" prop="endDate" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="启用状态" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.state"
            inline-prompt
            size="large"
            :active-value="0"
            :inactive-value="1"
            active-text="启用"
            inactive-text="停用"
            @change="changeState(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <HolidayDetail ref="detailRef" :form="form" @refreshPage="getList" />
</template>

<script setup>
import HolidayDetail from "./detail.vue";
import {
  getHolidayListAPI,
  deleteHolidayAPI,
  updateHolidayAPI,
} from "@/api/institution/holidaySetting";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const list = ref([]);
const detailRef = ref(null);

/**列表查询 */
function getList() {
  loading.value = true;
  getHolidayListAPI({ pageSize: 9999, pageNum: 1 }).then((response) => {
    list.value = response.rows;
    loading.value = false;
  });
}

function changeState(row) {
  let message = "";
  if (row.state == 1) {
    message = "确认停用？";
  } else {
    message = "确认启用？";
  }
  proxy.$modal
    .confirm(message)
    .then(function () {
      updateHolidayAPI({
        id: row.id,
        state: row.state,
        isDelete: 0,
        name: row.name,
        startDate: row.startDate,
        endDate: row.endDate,
        remark: row.remark,
      })
        .then((response) => {
          proxy.$modal.msgSuccess("操作成功");
          getList();
        })
        .catch(() => {
          loading.value = false;
          getList();
        });
    })
    .catch(() => {
      getList();
    });
}

/** 新增按钮操作 */
function handleAdd() {
  detailRef.value.openW("新增节假日", null);
}

/** 编辑按钮操作 */
function handleUpdate(row) {
  detailRef.value.openW("编辑节假日", JSON.parse(JSON.stringify(row)));
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除"' + row.name + '"？')
    .then(function () {
      return deleteHolidayAPI({ id: row.id });
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

getList();
</script>

<style lang="scss" scoped>
.el-alert {
  margin-bottom: 15px;
}
</style>
